// 新增簿记页面
import React from 'react';
import { connect } from 'dva';
import { FirstHeaderC } from '../../../comps';
import { Menu, Spin } from 'antd';
import style from './style.less';
import AddBond from '../../InvestmentManage/BondTradeNew/orderComps/addBond.js';
import AddFinaFlockingOrder from '../../InvestmentManage/finaFlockingNew/orderComps/addOrder';
import AddNonstandardOrder from '../../InvestmentManage/nonstandardOrder/orderComps/addOrder';
import BuyBackOrder from '../../InvestmentManage/BuybackOrder/buyBackOrder';
import AddFunTradeC from '../../InvestmentManage/fundTradeOrder/AddTradeC';
import AddNew from '../../InvestmentManage/depositOrderNew/AddNew';
import CashOrder from '../../InvestmentManage/CashOrder/cashOrder';
import menus from './dictMenu';

const MenuItem = Menu.Item;
const { SubMenu } = Menu;
class TradeAddC extends React.Component {
  state = {
    memu: [], // 左侧导航
    loading: true, // 初始化进入页面，laoding
    selMenuItem: '0', // 默认选中第一条
  };

  componentDidMount() {}

  // “保存”
  onOk = () => {
    this.props.onRefresh();
  };
  // “取消”
  onCancel = () => {
    this.props.onClose();
  };

  showTable = () => {
    const { selMenuItem } = this.state;
    const { listId } = this.props;
    switch (selMenuItem) {
      case '0':
        return <AddBond listId={listId} type={10} onOk={this.onOk} onCancel={this.onCancel} />;
      case '1':
        return <AddFunTradeC listId={listId} type={10} onCancel={this.onCancel} onOk={this.onOk} />;
      case '2':
        return <BuyBackOrder listId={listId} type={10} onCancel={this.onCancel} onOk={this.onOk} />;
      case '3':
        return <AddFinaFlockingOrder listId={listId} type={10} onOk={this.onOk} onCancel={this.onCancel} />;
      case '4':
        return <AddNew state={10} listId={listId} onCancel={this.onCancel} onOk={this.onOk} />;
      case '5':
        return <AddNonstandardOrder listId={listId} type={10} onOk={this.onOk} onCancel={this.onCancel} />;
      case '6':
        return <CashOrder listId={listId} onOk={this.onOk} onCancel={this.onCancel} />;
    }
  };
  //菜单展示
  getMenu = () => {
    let data =
      menus &&
      menus.map((item) => {
        if (item.children && item.children.length) {
          return (
            <SubMenu title={item.value} key={item.code}>
              {item.children.map((child) => {
                return (
                  <MenuItem key={child.code} value={child.code}>
                    {child.value}
                  </MenuItem>
                );
              })}
            </SubMenu>
          );
        } else {
          return (
            <MenuItem key={item.code} value={item.code}>
              {item.value}
            </MenuItem>
          );
        }
      });
    return data;
  };

  render() {
    let { selMenuItem } = this.state;
    let { headerHeight } = this.props.globalM;
    return (
      <div>
        <FirstHeaderC title={'交易录入'} />
        <div className={style.bookkeepingMnt}>
          {/* 左侧导航 */}

          <div className={style.left} style={{ height: `calc(100vh - ${170 + headerHeight}px)` }}>
            <Menu mode='inline' defaultSelectedKeys={[selMenuItem]} onClick={(val) => this.setState({ selMenuItem: val.key })}>
              {this.getMenu()}
            </Menu>
          </div>
          {/* 右侧内容区 */}
          <div className={style.right} style={{ width: 'calc(100vw - 200px)', maxHeight: `calc(100vh - ${170 + headerHeight}px)`, overflow: 'auto' }}>
            <div className={style.rightTop}>
              {/* 根据导航，展示内容 */}
              {this.showTable()}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default connect(({ dictionaryM, loading, globalM }) => ({ dictionaryM, loading, globalM }))(TradeAddC);
